<template>
	<div>
		<bi-legend :lang-type="langType" @legend-result="onLegend" :option="lineOption.legend"></bi-legend>
		<bi-grid :lang-type="langType" @grid-result="onGrid" :option="lineOption.grid"></bi-grid>
		<bi-axis
			:lang-type="langType"
			axis-name="X"
			axis-type="category"
			@axis-result="onXAxis"
			:option="lineOption.xAxis"
		></bi-axis>
		<bi-axis
			:lang-type="langType"
			axis-name="Y"
			axis-type="value"
			@axis-result="onYAxis"
			:option="lineOption.yAxis"
		></bi-axis>
		<bi-data-zoom :lang-type="langType" @data-zoom-result="onDataZoom" :option="lineOption.dataZoom"></bi-data-zoom>
		<bi-visual-map
			:lang-type="langType"
			@visual-map-result="onVisualMap"
			:option="lineOption.visualMap"
		></bi-visual-map>
		<bi-tool-tip :lang-type="langType" @tooltip-result="onToolTip" :option="lineOption.tooltip"></bi-tool-tip>
		<bi-line-series
			:lang-type="langType"
			@series-result="onSeries"
			:series-name="item.name"
			:option="lineOption.series[idx]"
			v-for="(item,idx) in lineOption.series"
			:key="idx"
		></bi-line-series>

		<div style="text-align:center">
			<md-button
				class="md-raised md-primary"
				@click="createChartOption"
			>{{getLangText(label.createChart)}}</md-button>
		</div>
	</div>
</template>
<script>
	import Legend from "@/components/comp/Legend";
	import Axis from "@/components/comp/Axis";
	import DataZoom from "@/components/comp/DataZoom";
	import VisualMap from "@/components/comp/VisualMap";
	import ToolTip from "@/components/comp/ToolTip";
	import LineSeries from "@/components/chart/LineSeries";
	import Grid from "@/components/comp/Grid";
	export default {
		name: "LineOption",
		props: {
			langType: {
				type: String,
				default: window.localStorage.getItem("langType")
			},
			option: {
				type: Object,
				default: function() {
					return {};
				}
			}
		},
		components: {
			"bi-legend": Legend,
			"bi-axis": Axis,
			"bi-data-zoom": DataZoom,
			"bi-visual-map": VisualMap,
			"bi-tool-tip": ToolTip,
			"bi-line-series": LineSeries,
			"bi-grid": Grid
		},
		data: () => ({
			label: {
				bgColor: { zh: "背景颜色", en: "BgColor" },
				visualMap: { zh: "开启视觉映射", en: "openVisualMap" },
				createChart: { zh: "生成图表", en: "CREATE CHART" },
				yes: { zh: "是", en: "yes" },
				no: { zh: "否", en: "no" }
			},
			lineOption: {
				grid: [],
				legend: null,
				xAxis: [],
				yAxis: [],
				dataZoom: [],
				visualMap: null,
				series: [{}]
			}
		}),
		watch: {
			option() {
				this.parseObj();
			}
			// lineOption:{
			//     deep:true,
			//     handler(){
			//         this.createChartOption();
			//     }
			// }
		},
		methods: {
			onLegend(op) {
				this.lineOption.legend = op;
			},
			onGrid(op) {
				this.lineOption.grid = op;
			},
			onXAxis(op) {
				this.lineOption.xAxis = op;
			},
			onYAxis(op) {
				this.lineOption.yAxis = op;
			},
			onDataZoom(op) {
				this.lineOption.dataZoom = op;
			},
			onVisualMap(op) {
				this.lineOption.visualMap = op;
			},
			onToolTip(op) {
				this.lineOption.tooltip = op;
			},
			onSeries(op) {
				for (var i = 0; i < this.lineOption.series.length; i++) {
					if (op.name == this.lineOption.series[i].name) {
						this.lineOption.series[i] = op;
						break;
					}
				}
			},

			parseObj() {
				if(!this.option||JSON.stringify(this.option)=='{}')return;
					for (var key in this.option) {
						this.lineOption[key] = this.option[key];
					}
				
			},
			createChartOption() {
				this.$emit("create-chart", this.lineOption);
			}
		},
		mounted() {
			this.parseObj();
		}
	};
</script>
